<template>
    <view class="btn-wrap">
        <view class="btn" @click="handleClick" :style="'display: ' + mode + ';width: '+ width +'rpx;height: '+ height +'rpx;line-height: '+ height +'rpx;background-color: '+ bgColor +';color: '+ color +';'">{{text}}</view>
    </view>
</template>

<script setup lang="ts">
withDefaults(defineProps<{
    text?: string
    mode?: string
    width?: number
    height?: number
    bgColor?: string
    color?: string
}>(), {
    text: '保 存',
    mode: 'block',
    width: 660,
    height: 70,
    bgColor: '#27BA9B',
    color: '#fff'
})

// 处理事件
const emit = defineEmits(['handleClick'])
const handleClick = () => {
    emit('handleClick')
}
</script>

<style scoped lang="scss">
.btn-wrap {
    padding: 40rpx 0 20rpx 0;
    display: flex;
    justify-content: center;
    .btn {
        text-align: center;
        border-radius: 6rpx;
    }
}
</style>